<template>
  <div class="cabinet-remove-module">
    <el-card>
      <!-- 检索功能 -->
      <div style="margin-bottom: 16px; display: flex; align-items: center;">
        <i class="el-icon-search" style="font-size: 18px; color: #909399; margin-right: 8px;"></i>
        <el-input v-model="searchKeyword" placeholder="输入区域、排、编号或状态进行检索" style="width: 260px;" />
      </div>
      <!-- 柜子列表和删除功能 -->
      <el-table :data="filteredCabinetsList" style="width: 100%">
        <el-table-column prop="id" label="柜子编号" width="180" />
        <el-table-column prop="area" label="区域" width="100" />
        <el-table-column prop="row" label="排" width="100" />
        <el-table-column prop="number" label="柜号" width="100" />
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="handleRemoveCabinet(scope.row)"
              :disabled="scope.row.status === 'in_use'"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCabinets"
      />
    </el-card>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "RemoveCabinetModule",
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      searchKeyword: ''
    };
  },
  computed: {
    ...mapState({
      areas: (state) => state.cabinets.areas,
      rows: (state) => state.cabinets.rows
    }),
    ...mapGetters(["getAllCabinets"]),
    filteredCabinetsList() {
      // 检索过滤
      const keyword = this.searchKeyword.trim().toLowerCase();
      let filtered = this.getAllCabinets;
      if (keyword) {
        filtered = filtered.filter(cabinet =>
          Object.values(cabinet).some(value =>
            String(value).toLowerCase().includes(keyword)
          )
        );
      }
      // 分页
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return filtered.slice(start, end);
    },
    totalCabinets() {
      // 检索后总数
      const keyword = this.searchKeyword.trim().toLowerCase();
      if (!keyword) return this.getAllCabinets.length;
      return this.getAllCabinets.filter(cabinet =>
        Object.values(cabinet).some(value =>
          String(value).toLowerCase().includes(keyword)
        )
      ).length;
    }
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        available: "空闲",
        in_use: "使用中",
        maintenance: "维修中"
      };
      return statusMap[status] || status;
    },
    getStatusType(status) {
      const typeMap = {
        available: "success",
        in_use: "info",
        maintenance: "danger"
      };
      return typeMap[status] || "info";
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async handleRemoveCabinet(cabinet) {
      try {
        await this.$confirm("确定要删除该柜子吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        await this.$store.dispatch("removeCabinet", cabinet.id);
        this.$message.success("删除柜子成功");
      } catch (error) {
        if (error !== "cancel") {
          this.$message.error(error.message || "删除柜子失败");
        }
      }
    }
  }
};
</script>

<style scoped>
.cabinet-remove-module {
  padding: 20px;
}
</style> 